<template>
	
	<view class = "container">
		
		<!-- loading 状态 -->
		<view v-if="loading" 
		class="loading-container">
			<image src="../../static/loading.gif" class="loading-icon"></image>
		    <text class="loading-text">加载中...</text>
		</view>
		
		<view 
		v-else-if="loaded"
		v-for = "(item,index) in items" :key = "item.id" 
		class="product-item-container">
		
			<image :src="item.imageUrl"		
			@error = "item.cover = default_path"
			class="product-item-image"
			></image>
			<view class = "product-item-info-container">
			<!-- <text>{{ this.baseUrl + item.cover }}</text> -->
			<text class = "product-item-name"> {{ item.name}} </text>	
			<text class = "product-item-price"> {{item.price}}元 </text>	
			<text class = "product-item-stock"> 剩余{{item.stock}}件 </text>	
			</view>
			<button type="primary" size="mini" @click="onProductItemClicked(index)" class= "button">购买</button>
			
			</view>
		
		
		<view v-else class = "error-container">
			<image
					src="/static/error3.png"
					mode="aspectFit"
					class="error-icon">
				</image>
			    <text class="error-text">加载商品列表失败</text>
				<button class="error-button" @click="fetchProductList()" >重试</button>
			
		</view>
	</view>
	
	<!-- 悬浮列表 -->
	<view class="order-list-container"
	 hover-class="order-list-container-hover"
	 @click="onOrderListButtonClicked()"
	>
		<text class="order-list-icon-text">≡</text>
	</view>
</template>

<script>
	import Product from '../../models/product';
	let tag = "product-list";
	
	export default {
		onLoad() {
			this.fetchProductList()
		},
		
		data() {
			return {
				// login : false,
				loading :false,
				loaded : true,
				default_path : "/static/error1.png",
				baseUrl: 'https://vending.neumooc.com/prod-api',
				items : []
				// items : [
				// 	{
				// 		id : 1,
				// 		name : "可乐",
				// 		price : 3,
				// 		imageUrl : "/static/可乐.png"
				// 	},
				// 	{
				// 		id : 2,
				// 		name : "牛奶",
				// 		price : 5,
				// 		imageUrl : "/static/牛奶.png"
				// 	},
				// 	{
				// 		id : 3,
				// 		name : "雪碧",
				// 		price : 5,
				// 		imageUrl : "https://pic.rmb.bdstatic.com/bjh/events/4531b384e18630fb4a7615d974a7a6e62814.jpeg"
						
				// 	}
				// ]
				
			}
		},
		methods: {
			onOrderListButtonClicked(){
				this.$log.info(tag, "onOrderListButtonClicked")
				
				if(this.loginManager.isLoggedIn()){
					this.$log.info(tag, "onOrderListButtonClicked navigate to orderList")
					uni.navigateTo({
						url: '/pages/order-list/order-list'
						
					})
				}else{
					this.$log.info(tag, "onorderListButtonClicked navigate to login")
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			onProductItemClicked(index) {
				this.$log.info(tag, `onProductItemClicked ${index}`);
				// 如果已登录，跳转“购买商品页”
				if (this.loginManager.isLoggedIn()) {
					this.$log.info(tag, "onProductItemClicked navigate to purchase")
					let productJsonString = JSON.stringify(this.items[index])
					uni.navigateTo({
						url: `/pages/purchase/purchase?product=${encodeURIComponent(productJsonString)}`
					})
				} else {	//如果未登录，跳转“登录页”
					this.$log.info(tag, "onProductItemClicked navigate to login")
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			
			fetchProductList() {
				this.$log.info(tag, "fetchProductList");
			
				uni.request({
					url: `${this.constant.BASE_URL}/api/machine/products`,
					method:'GET',
					data:{
						'machineNo':this.constant.MACHINE_NO,
					},
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					  },
					success:(res)=> {
						this.$log.info(tag, "获取商品列表成功");
						this.loading = false;
						this.loaded = true;
						console.log(res.data);
						this.items = this.parseProductList(res.data);
								
					},
					fail:(error)=>{
						this.$log.error(tag, "获取商品列表失败");
						
						
					}
				});
			},
			
			parseProductList(jsonObject){
				let productList = [];
				jsonObject.data.forEach((catagory) => {
					catagory.productList.forEach((product) => {
						productList.push(new Product(
							product.productId,
							product.name,
							product.price,
							`${this.constant.BASE_URL}${product.cover}`,
							product.stock
						));
					});
				});
				console.log(productList);
				return productList;
				
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
	}
	
	.product-item-container {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;
		align-items: center;
		justify-content: center;
	}

	.product-item-info-container {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}
	
	.product-item-name {
		font-size: 38rpx;
		font-weight: bold;
	}
	
	.product-item-stock {
		font-size: 30rpx;
		color: grey;
	}
	
	.product-item-price {
		font-size: 38rpx;
		font-weight: bold;
		color: coral
	}
	
	.product-item-image {
		width: 200rpx;
		height: 200rpx;
	}
	
	.product-item-hover-effect {
		opacity: 0.5;
	}
	
	.loading-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.loading-text {
		font-size: 40rpx;
		color: grey;
	}
	
	.loading-icon {
		width: 80px;
		height: 80px;
	}
	
	.error-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.error-icon {
		width: 80px;
		height: 80px;
	}
	
	.error-text {
		color: grey;
		font-size: 30rpx;
		margin-top: 5px;
	}
	
	.retry-button {
		font-size: 35rpx;
		margin-top: 15px;
		color: steelblue;
	}
	
	.order-list-container {
		position: fixed;
		bottom: 50px;
		right: 50px;
		width: 40px;
		height: 40px;
		background-color: #08f;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.order-list-container-hover {
		opacity: 0.5;
	}
	
	.order-list-icon-text {
		color: white;
		font-size: 60rpx;
		font-weight: bold; 
		padding-bottom: 2px;
	}
	.button {
		display: inline-flex;
		padding: 0 20px;
	    }
</style>
